import React, {useState, useEffect} from 'react';
import styles from './styles.module.less';
import {Button, Form, Input, Modal} from "antd";
import {useNavigate} from "react-router-dom";
import TextArea from "antd/es/input/TextArea";

const ContactDialogCom = ({
                              requirementModalVisibleFrom, // Remove the default value
                              handleModalClose
                          }) => {
    const navigate = useNavigate();
    const [requirementModalVisible, setRequirementModalVisible] = useState(requirementModalVisibleFrom);

    useEffect(() => {
        setRequirementModalVisible(requirementModalVisibleFrom);
    }, [requirementModalVisibleFrom]);


    return (
        <Modal
            open={requirementModalVisible}
            footer={null}
            onCancel={() => {setRequirementModalVisible(false);handleModalClose();}}
            style={{minWidth: 650}}
        >
            <div className={styles.requirement_modal_box}>
                <div className={styles.title}>联系我们</div>
                <div className={styles.form_box}>
                    <Form layout="vertical">
                        <div className={styles.form_row}>
                            <Form.Item name='name'>
                                <Input name='name' placeholder='姓名'/>
                            </Form.Item>
                            <Form.Item name='moniker'>
                                <Input name='moniker' placeholder='名'/>
                            </Form.Item>
                        </div>
                        <div className={styles.form_row}>
                            <Form.Item name='company'>
                                <Input name='company' placeholder='公司'/>
                            </Form.Item>
                            <Form.Item name='email'>
                                <Input name='email' placeholder='电子邮件'/>
                            </Form.Item>
                        </div>

                        <Form.Item name='desc'>
                            <Input.TextArea name='desc' placeholder='需求详情...'/>
                        </Form.Item>
                        <div className={styles.footer_box}>
                        <Button type='primary' onClick={() => {
                                setRequirementModalVisible(false);
                                handleModalClose(); // 调用父组件传递的关闭方法
                            }}>提交</Button>
                        </div>
                    </Form>
                </div>
            </div>
        </Modal>
    );
};

export default ContactDialogCom;
